<template>
	<joy-page class="joyPage bg-gary">
		<view style="height:426rpx;background: url(https://test.hrycf.com/hryxcx/orderbg.png);background-repeat: no-repeat;
		background-size: 100% 100%;">
			<cu-custom bgColor="bg-transparent" :isBack="true">
				<block slot="backText"></block>
				<block slot="content">项目支持</block>
			</cu-custom>
			<view class="padding">
				<view class="cu-steps">
					<view class="cu-item" :class="index>basics?'text-invalid':'text-white'" v-for="(item,index) in basicsList" :key="index">
						<text :class="'cuIcon-' + item.cuIcon"></text> <span class='step-text'>{{item.name}}</span>
					</view>
				</view>
			</view>
		</view>
		<view v-if="basics == 0">
			<view class="orderContent bg-white">
				<view class="info">
					<view class="order-content">
						<view class="text-gray text-sm text-left">项目名称： <text class="text-bold text-lg text-black">{{projectInfo.project_name}}</text></view>
						<m-input type="number" label='支持金额' v-model="money" :maxLength="11" :focus="true"></m-input>
						<view class="balance flex justify-between">
							<view class="text-gray text-sm">您的余额：<text class="text-pink">{{projectInfo.money}}元</text></view>
							<button class="cu-btn bg-orange sm" @tap="goPage('recharge')">充值</button>
						</view>
						<view class="text-gray text-sm mark text-left">*支持金额必须为100的倍数</view>
					</view>
				</view>
			</view>
			<view class="flex btn-box padding">
				<button class="cu-btn btn-primary flex-sub btn-shadow" @tap="support">立即支持</button>
			</view>
			<view class="flex justify-center padding-right padding-top">
				<van-checkbox :value="checked" checked-color="#FF6A00" @change="checked = !checked">
					<text class="text-sm">我已阅读并同意</text><text class="text-orange text-sm" @tap="goPage('agreement','tzfx')">《投资风险承诺书》</text>
				</van-checkbox>
			</view>
		</view>
		<view v-if="basics == 1">
			<view class="orderContent bg-white">
				<view class="info">
					<view class="order-content">
						<view class="cu-bar">
							<view class="action">
								<text class="cuIcon-titles text-pink"></text>
								<text class="text-lg text-bold">订单信息</text>
							</view>
						</view>
						<view class="order margin-bottom">
							<view class="text-gray text-df"> <text class="label">订单金额：</text><text class="text-pink">{{orderInfo.money}}元</text></view>
							<view class="text-gray text-df"><text class="label">订单编号：</text><text class="">{{orderInfo.order_sn}}</text></view>
							<view class="text-gray text-df"><text class="label">创建时间：</text><text class="">{{orderInfo.create_times}}</text></view>
							<view class="line"></view>
							<view class="text-gray text-df"><text class="label">支付账户：</text><text class="">{{orderInfo.mobile}}</text></view>
							<view class="text-gray text-df flex"><text class="label">验证码：</text><input type="number" v-model="code"
								 :maxLength="6"></input><button class="cu-btn bg-orange margin-left count">{{ count }}s</button></view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex btn-box padding">
				<button class="cu-btn btn-primary flex-sub btn-shadow" :disabled="disabled" @tap="submitOrder">
					<text class="cuIcon-upload" v-show='disabled'></text> 确认支持</button>
			</view>
		</view>
		<view v-if="basics == 2">
			<view class="orderContent bg-white padding">
				<view class="info">
					<image class="orderSuc" src="/static/img/orderSuc.png" mode="widthFix" style="width: 302rpx;"></image><br>
					<text class="text-xl">支付成功</text><br>
					<view class="flex btn-wrap-suc">
						<button class="flex-sub cu-btn bg-pink text-white margin-right-lg" @tap="createCanvasImageEvn">分享给好友</button>
						<button class="flex-sub cu-btn bg-white" style="border: 1rpx solid #999999; color: #999999;" @tap="back">返回项目</button>
					</view>
					<!-- <view class="cu-item share" >
						<text class="text-xl text-cyan"></text>
					</view> -->
				</view>
			</view>
		</view>
		<hchPoster ref="hchPoster" :canvasFlag.sync="canvasFlag" @cancel="canvasCancel" :posterObj.sync="posterData" />
		<!-- 海报 要放外面放组件里面 会找不到 canvas-->
		<view class="canvas-box">
			<canvas :hidden="canvasHidden" style="width: 200rpx;height:200rpx;background:#f1f1f1;" canvas-id="canvasImg" />
		</view>
		<view class="canvasBox" style="width:0;height:0;overflow: hidden;opacity:0;position:absolute;left:-750px;top:0;">
			<canvas canvas-id='myCanvas' style='width:750px;height:1334px;'></canvas>
		</view>
	</joy-page>

</template>

<script>
	import mInput from '@/components/m-input/m-input.vue'
	import hchPoster from '@/components/hch-poster/hch-poster.vue'
	export default {
		components: {
			mInput,
			hchPoster
		},
		data() {
			let that = this;
			return {
				imgUrl: that.$mConfig.assetsPath,
				basicsList: [{
					cuIcon: 'radioboxfill',
					name: '项目支持'
				}, {
					cuIcon: 'radioboxfill',
					name: '付款订单'
				}, {
					cuIcon: 'roundcheckfill',
					name: '付款成功'
				}],
				basics: 0,
				id: '54',
				projectInfo: {},
				money: '',
				checked: false,
				orderInfo: {},
				code: "",
				count: 180,
				timer: null,
				isError: false,
				disabled: false,
				showModal: true,
				canvasFlag: true,
				posterData: {}
			};
		},
		onLoad(res) {
			if (res.id) {
				this.id = res.id
			}
			this.oderProject()
		},
		onHide() {
			clearInterval(this.timer);
		},
		methods: {
			// 取消海报
			canvasCancel(val) {
				this.canvasFlag = val;
			},
			createCanvasImageEvn() {
				// 这个是固定写死的小程序码
				Object.assign(this.posterData, {
					url: this.imgUrl + this.projectInfo.thumb, //商品主图
					title: this.projectInfo.project_name,
					discountPrice: '支持金额(元)：￥' + this.money, //支持价格
					code: 'https://test.hrycf.com/hryxcx/hrycode.png', //小程序码
				})
				this.$forceUpdate(); //强制渲染数据
				setTimeout(() => {
					console.log(this.canvasFlag)
					this.canvasFlag = false; //显示canvas海报
					this.$refs.hchPoster.createCanvasImage(); //调用子组件的方法
				}, 500)
			},
			goPage(routerName, info) {
				this.$mRouter.push({
					route: this.$mRoutesConfig[routerName],
					query: {
						type: info
					}
				})
			},
			BasicsSteps() {
				this.basics = this.basics == this.basicsList.length - 1 ? 0 : this.basics + 1
			},
			async oderProject() {
				this.projectInfo = await this.$apis.oderProject({
					project_id: this.id
				});
			},
			async support() {
				let validate = true;
				// if (this.money % 100 !== 0) {
				// 	validate = false;
				// 	uni.showToast({
				// 		title: '支持金额必须为100的倍数',
				// 		icon: 'none'
				// 	})
				// 	return false;
				// }
				let reg = /^[1-9]\d*$/;
				if (!reg.test(this.money)) {
					validate = false;
					uni.showToast({
						title: '首位数字不能为零',
						icon: 'none'
					})
					return false;
				}
				if (!this.checked) {
					validate = false;
					uni.showToast({
						title: '您尚未同意投资协议',
						icon: 'none'
					})
					return false;
				}
				this.orderInfo = await this.$apis.createOrder({
					project_id: this.id,
					money: this.money
				});
				this.getOrderInfo()
				this.BasicsSteps()
			},
			async getOrderInfo() {
				let info = await this.$apis.getOrderInfo({
					order_id: this.orderInfo.order_id,
				});
				uni.showToast({
					title: '短信验证码已发送，注意查收',
					icon: 'none'
				})
				Object.assign(this.orderInfo, info.order_info);
				if (this.orderInfo.current_time - this.orderInfo.order_time > 180) {
					this.count = 0;
				} else {
					this.count = 180 - (this.orderInfo.current_time - this.orderInfo.order_time);
					this.countdown();
				}
			},
			countdown() {
				let that = this;
				this.timer = setInterval(() => {
					if (this.count > 0) {
						this.count--;
					} else {
						clearInterval(this.timer);
						uni.showModal({
							title: "尊敬的用户：",
							content: "验证码已失效，请重新支持",
							confirmText: "重新支持",
							cancelText: "返回项目",
							success(res) {
								if (res.confirm) {
									that.basics = 0
								} else {
									that.back()
								}
							}
						});
					}
				}, 1000);
			},
			async submitOrder() {
				let that = this;
				try {
					if (!this.code) {
						uni.showToast({
							title: '请输入验证码',
							icon: 'none'
						})
						return false;
					}
					this.disabled = true;
					let info = await this.$apis.confirmPayOrder({
						order_id: this.orderInfo.order_id,
						code: this.code
					});
					this.BasicsSteps()
					this.disabled = false;
				} catch (e) {
					this.disabled = false;
					uni.showModal({
						title: "尊敬的用户：",
						content: e,
						confirmText: "重新支持",
						cancelText: "返回项目",
						success(res) {
							if (res.confirm) {
								that.basics = 0
							} else {
								that.back()
							}
						}
					});
				}

			},
			back() {
				let page = getCurrentPages()
				if (page.length > 1) {
					this.$mRouter.back()
				} else {
					this.$mRouter.push({
						route: this.$mRoutesConfig.projectDetail,
						query: {
							id: this.id
						}
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-bar{
		min-height: 45rpx;
		margin-bottom: 54rpx;
	}
	.btn-box{
		margin-top: 90rpx;
		width: 100%;
	}
	.text-invalid{
		color: #FFBDAE;
	}
	.bg-gary {
		background-color: #F8F8F8;
	}

	.step-text {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.cu-steps .cu-item [class*="cuIcon-"],
	.cu-steps .cu-item .num {
		line-height: 50rpx;
	}

	.cu-steps .cu-item:before,
	.cu-steps .cu-item:after,
	.cu-steps.steps-arrow .cu-item:before,
	.cu-steps.steps-arrow .cu-item:after {
		top: 25rpx;
	}

	.orderContent {
		width: calc(100% - 60rpx);
		margin: -88rpx auto 0;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(255, 255, 255, 1);
		box-shadow: 0px 8px 27px 0px rgba(242, 239, 242, 0.78);
		border-radius: 8px;
		font-size: 0;
		text-align: center;
		position: relative;
		image {
			width: 100%;
			font-size: 0;
		}

		.orderSuc {
			margin-top: 36rpx;
			margin-bottom: 47rpx;
			width: 302rpx;
			font-size: 0;
		}
	}

	.info {
		padding-top: 64rpx;

		.text-nor {
			display: block;
			margin-top: 18rpx;
			margin-bottom: 30rpx;
		}

		.balance {
			text-align: left;
			margin: 60rpx 0 0rpx;
		}

		.mark {
			padding: 20rpx 0;
		}

		.order-content {
			padding: 0 52rpx;
		}
	}

	.share {
		margin: 156rpx 0 64rpx;
	}

	.fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		border-radius: 0;
	}

	.label {
		width: 152rpx;
		line-height: 60rpx;
		display: inline-block;
	}

	.order {
		text-align: left;

		.text-gray {
			color: #646464;
		}
	}

	.line {
		width: 100%;
		height: 1px;
		background-color: #E6E6E6;
		margin: 17rpx 0;
	}

	.cu-bar .action:first-child {
		margin-left: 0
	}

	input {
		border: 1px solid #B6B6B6;
		border-radius: 10px;
		padding: 0 20rpx;
		height: 64rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.count {
		border-radius: 10px;
	}

	.btn-wrap-suc {
		margin-top: 99rpx;
		margin-bottom: 50rpx;
	}
	.canvas-box {
		position: fixed;
		top: 999999rpx;
		left: 0;
	}
</style>
